<template>
  <div class="match-detail-container">
    <div v-loading="loading">
      <el-card v-if="match" class="match-card">
        <!-- 比赛基本信息 -->
        <div class="match-header">
          <div class="match-status" :class="getStatusClass(match.status)">
            {{ getStatusText(match.status) }}
          </div>
          <div class="match-time">{{ formatDateTime(match.matchTime) }}</div>
        </div>
        
        <!-- 球队信息 -->
        <div class="teams-container">
          <div class="team home-team">
            <div class="team-logo">
              <img :src="getTeamLogo(match.homeTeamLogo)" alt="主队Logo">
            </div>
            <div class="team-name">{{ match.homeTeamName }}</div>
          </div>
          
          <div class="match-score" v-if="match.status === 'FINISHED'">
            <span class="score">{{ match.homeScore }}</span>
            <span class="score-divider">:</span>
            <span class="score">{{ match.awayScore }}</span>
          </div>
          <div class="match-vs" v-else>
            <span>VS</span>
          </div>
          
          <div class="team away-team">
            <div class="team-logo">
              <img :src="getTeamLogo(match.awayTeamLogo)" alt="客队Logo">
            </div>
            <div class="team-name">{{ match.awayTeamName }}</div>
          </div>
        </div>
        
        <!-- 场馆信息 -->
        <div class="venue-info">
          <i class="el-icon-location"></i>
          <span>{{ match.venueName }} - {{ match.venueCity }} {{ match.venueAddress }}</span>
        </div>
        
        <!-- 购票按钮 -->
        <div class="ticket-action" v-if="match.status === 'SCHEDULED'">
          <el-button type="primary" @click="buyTicket" icon="el-icon-shopping-cart-2">立即购票</el-button>
        </div>
      </el-card>
      
      <!-- 详细信息标签页 -->
      <el-tabs v-if="match" class="detail-tabs" v-model="activeTab">
        <el-tab-pane label="球队阵容" name="lineup">
          <div class="lineup-container">
            <div class="team-lineup">
              <div class="team-header">
                <img :src="getTeamLogo(match.homeTeamLogo)" class="team-logo-small">
                <h3>{{ match.homeTeamName }} 阵容</h3>
              </div>
              <el-table :data="match.homePlayers" style="width: 100%" stripe>
                <el-table-column prop="number" label="号码" width="80" align="center"></el-table-column>
                <el-table-column prop="name" label="姓名"></el-table-column>
                <el-table-column prop="position" label="位置"></el-table-column>
                <el-table-column label="照片" width="100" align="center">
                  <template slot-scope="scope">
                    <el-avatar :src="getPlayerPhoto(scope.row.photoUrl)" size="medium"></el-avatar>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            
            <div class="team-lineup">
              <div class="team-header">
                <img :src="getTeamLogo(match.awayTeamLogo)" class="team-logo-small">
                <h3>{{ match.awayTeamName }} 阵容</h3>
              </div>
              <el-table :data="match.awayPlayers" style="width: 100%" stripe>
                <el-table-column prop="number" label="号码" width="80" align="center"></el-table-column>
                <el-table-column prop="name" label="姓名"></el-table-column>
                <el-table-column prop="position" label="位置"></el-table-column>
                <el-table-column label="照片" width="100" align="center">
                  <template slot-scope="scope">
                    <el-avatar :src="getPlayerPhoto(scope.row.photoUrl)" size="medium"></el-avatar>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </el-tab-pane>
        
        <el-tab-pane label="场馆信息" name="venue">
          <div class="venue-container">
            <div class="venue-image">
              <img :src="getVenueImage(match.venueImage)" alt="场馆图片">
            </div>
            
            <div class="venue-details">
              <h3>{{ match.venueName }}</h3>
              <p><i class="el-icon-location"></i> {{ match.venueCity }} {{ match.venueAddress }}</p>
              
              <div class="section-info">
                <h4>场馆区域</h4>
                <el-table :data="match.venueSections" style="width: 100%" stripe>
                  <el-table-column prop="name" label="区域名称"></el-table-column>
                  <el-table-column prop="capacity" label="容量" width="100"></el-table-column>
                  <el-table-column label="状态" width="100">
                    <template slot-scope="scope">
                      <el-tag :type="scope.row.isSoldOut ? 'danger' : 'success'">
                        {{ scope.row.isSoldOut ? '已售罄' : '可购票' }}
                      </el-tag>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </div>
        </el-tab-pane>
        
        <el-tab-pane label="工作人员" name="staff">
          <div class="staff-container">
            <div class="referee-info">
              <h3>裁判信息</h3>
              <div class="referee-card" v-if="match.refereeName">
                <el-avatar :src="getRefereePhoto(match.refereePhoto)" :size="80"></el-avatar>
                <div class="referee-details">
                  <h4>{{ match.refereeName }}</h4>
                  <p>级别: {{ match.refereeLevel }}</p>
                </div>
              </div>
              <div v-else class="no-data">暂无裁判信息</div>
            </div>
            
            <div class="volunteers-info">
              <h3>志愿者信息</h3>
              <el-table :data="match.volunteers" style="width: 100%" v-if="match.volunteers && match.volunteers.length > 0" stripe>
                <el-table-column prop="id" label="ID" width="80"></el-table-column>
                <el-table-column prop="name" label="姓名"></el-table-column>
              </el-table>
              <div v-else class="no-data">暂无志愿者信息</div>
            </div>
          </div>
        </el-tab-pane>
        
        <el-tab-pane label="票价信息" name="tickets" v-if="match.status === 'SCHEDULED'">
          <div class="tickets-container">
            <h3>票价信息</h3>
            <el-table :data="match.ticketPrices" style="width: 100%" stripe>
              <el-table-column prop="sectionName" label="区域"></el-table-column>
              <el-table-column prop="price" label="价格">
                <template slot-scope="scope">
                  <span class="price">¥{{ scope.row.price }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="availableSeats" label="可用座位"></el-table-column>
              <el-table-column label="操作" width="150">
                <template slot-scope="scope">
                  <el-button 
                    type="primary" 
                    size="small" 
                    @click="buyTicketForSection(scope.row)"
                    :disabled="scope.row.availableSeats <= 0">
                    购票
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
      </el-tabs>
      
      <div v-if="!match && !loading" class="no-data">
        比赛信息不存在或已被删除
      </div>
    </div>
  </div>
</template>

<script>
import request from '@/utils/request'

export default {
  name: 'MatchDetail',
  data() {
    return {
      loading: false,
      match: null,
      activeTab: 'lineup'
    }
  },
  created() {
    this.fetchMatchDetail()
  },
  methods: {
    async fetchMatchDetail() {
      this.loading = true
      try {
        const res = await request({
          url: `/api/matches/${this.$route.params.id}`,
          method: 'get'
        })
        
        if (res.code === 200) {
          this.match = res.data
        } else {
          this.$message.error(res.msg || '获取比赛详情失败')
        }
      } catch (error) {
        console.error('获取比赛详情失败', error)
        this.$message.error('获取比赛详情失败')
      } finally {
        this.loading = false
      }
    },
    getTeamLogo(logoUrl) {
      if (logoUrl) {
        if (logoUrl.startsWith('http')) {
          return logoUrl
        }
        return `http://localhost:8088/api/file/get/${logoUrl}`
      }
      return require('../../assets/default-team.png')
    },
    getPlayerPhoto(photoUrl) {
      if (photoUrl) {
        if (photoUrl.startsWith('http')) {
          return photoUrl
        }
        return `http://localhost:8088/api/file/get/${photoUrl}`
      }
      return require('../../assets/default-avatar.png')
    },
    getVenueImage(imageUrl) {
      if (imageUrl) {
        if (imageUrl.startsWith('http')) {
          return imageUrl
        }
        return `http://localhost:8088/api/file/get/${imageUrl}`
      }
      return require('../../assets/default-venue.png')
    },
    getRefereePhoto(photoUrl) {
      if (photoUrl) {
        if (photoUrl.startsWith('http')) {
          return photoUrl
        }
        return `http://localhost:8088/api/file/get/${photoUrl}`
      }
      return require('../../assets/default-avatar.png')
    },
    formatDateTime(dateStr) {
      if (!dateStr) return ''
      const date = new Date(dateStr)
      return date.toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit'
      })
    },
    getStatusText(status) {
      const statusMap = {
        'SCHEDULED': '未开始',
        'ONGOING': '进行中',
        'FINISHED': '已结束',
        'CANCELLED': '已取消'
      }
      return statusMap[status] || status
    },
    getStatusClass(status) {
      const classMap = {
        'SCHEDULED': 'status-scheduled',
        'ONGOING': 'status-ongoing',
        'FINISHED': 'status-finished',
        'CANCELLED': 'status-cancelled'
      }
      return classMap[status] || ''
    },
    buyTicket() {
      this.$router.push(`/tickets/${this.$route.params.id}`)
    },
    buyTicketForSection(section) {
      this.$router.push({
        path: `/tickets/${this.$route.params.id}`,
        query: { sectionId: section.sectionId }
      })
    }
  }
}
</script>

<style scoped>
.match-detail-container {
  padding: 20px;
}

.match-card {
  margin-bottom: 20px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.match-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.match-status {
  font-weight: bold;
  padding: 6px 12px;
  border-radius: 4px;
}

.status-scheduled {
  background-color: #e6f7ff;
  color: #1890ff;
}

.status-ongoing {
  background-color: #fff7e6;
  color: #fa8c16;
}

.status-finished {
  background-color: #f6ffed;
  color: #52c41a;
}

.status-cancelled {
  background-color: #fff1f0;
  color: #f5222d;
}

.match-time {
  color: #606266;
  font-size: 14px;
}

.teams-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.team {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 40%;
}

.team-logo {
  width: 100px;
  height: 100px;
  object-fit: contain;
  margin-bottom: 10px;
  border-radius: 50%;
  padding: 10px;
  background-color: #f9f9f9;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.team-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.team-name {
  font-size: 18px;
  font-weight: bold;
}

.match-score, .match-vs {
  display: flex;
  align-items: center;
  font-size: 32px;
  font-weight: bold;
  color: #ff9800;
}

.score-divider {
  margin: 0 10px;
}

.venue-info {
  color: #606266;
  margin: 20px 0;
  display: flex;
  align-items: center;
}

.venue-info i {
  margin-right: 8px;
  color: #ff9800;
}

.ticket-action {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.detail-tabs {
  background-color: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.lineup-container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}

.team-lineup {
  flex: 1;
  min-width: 300px;
}

.team-header {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.team-logo-small {
  width: 40px;
  height: 40px;
  margin-right: 10px;
  border-radius: 50%;
}

.venue-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.venue-image {
  flex: 1;
  min-width: 300px;
}

.venue-image img {
  width: 100%;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.venue-details {
  flex: 2;
  min-width: 300px;
}

.section-info {
  margin-top: 20px;
}

.staff-container {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.referee-card {
  display: flex;
  align-items: center;
  padding: 20px;
  border-radius: 8px;
  background-color: #f9f9f9;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.referee-details {
  margin-left: 20px;
}

.referee-details h4 {
  margin: 0 0 10px 0;
  font-size: 18px;
}

.referee-details p {
  margin: 0;
  color: #606266;
}

.tickets-container {
  margin-top: 10px;
}

.price {
  color: #f56c6c;
  font-weight: bold;
}

.no-data {
  text-align: center;
  padding: 50px 0;
  color: #909399;
  font-size: 16px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

@media (max-width: 768px) {
  .lineup-container, .venue-container {
    flex-direction: column;
  }
  
  .team-lineup, .venue-image, .venue-details {
    width: 100%;
  }
}
</style> 